<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="../assets/images/logo.png">
    <title>Document</title>
    
    <!-- 引入css：elementUi、bootstrap、bootstrap-icons、normalize统一规范、index -->
    <link rel="stylesheet" href="../node_modules/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../node_modules/bootstrap-icons/font/bootstrap-icons.min.css">
    <link rel="stylesheet" href="../assets/css/normalize.css">
    <link rel="stylesheet" href="../assets/css/detail.css">

    <!-- 引入JS：vue、elementUI、jQuery、bootstrap -->
    <script src="../node_modules/vue/dist/vue.min.js"></script>
    <script src="../node_modules/element-ui/lib/index.js"></script>
    <script src="../node_modules/jQuery/tmp/jquery.js"></script>
    <script src="../node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
    <!-- 引入http-vue-loader：html页面中引入VUE组件需要的包 -->
    <!-- <script src="https://unpkg.com/http-vue-loader"></script> -->
    <script src="../node_modules/http-vue-loader/src/httpVueLoader.js"></script>
    <script src="../node_modules/axios/dist/axios.min.js"></script>
    <script src="../assets/js/common.js"></script>

</head>

<body>
  <div id="app">
    <!-- 引入头部组件 -->
    <my-header></my-header>

    <section style="margin-top: 80px">
        <div class="container" align="center">
            <a href="#">
                <img :src="article.articlePic" height="370px" alt="" />
            </a>
        </div>
    </section>
  
    <section class="mt-3">
      <div class="container">
          <div class="card" style="background-color: white;">
              <div class="card-body">
                <div class="text-center">
                  <h2 class="my-4">{{article.articleName}}</h2>
                  <p>
                    <i class="bi bi-folder2-open opacity-50"></i>
                    <span class="card-text articleMsg">{{article.articleTypeName}}</span>
                    <i class="bi bi-tags opacity-50 ms-2"></i>
                    <span class="card-text articleMsg">{{article.articleTage}}</span>
                    <i class="bi bi-alarm opacity-50  ms-2"></i>
                    <span class="card-text articleMsg">{{article.updateTime}}</span>
                    <a href="#" class="card-link articleMsg ms-2">
                      <i class="bi bi-hand-thumbs-up-fill opacity-50"></i> {{article.articleStarNum}}
                    </a>
                    <i class="bi bi-book-half opacity-50 ms-2"></i>
                    <span class="card-text articleMsg">{{article.articleReadCount}}</span>
                  </p>
                  <hr class="my-4"/>
                  <p class="text-start" v-html="article.articleContent">

                  </p>
                </div>
                <hr class="my-4"/>
                <div>
                  <h3>相关文章</h3>
                  <ul class="list-group list-group-flush mb-3">
                    <li class="list-group-item" style="border: none;" v-for="a in relatedArticles">&bull;
                      <a :href="'blog-detail.html?' + a.id" class="text-info article" target="_self">{{a.articleName}}</a>
                    </li>

                  </ul>


                  <div style="background-color: #fafbfc;">
                    <div class="d-flex">
                      <img src="../../assets/images/p28.jpg" alt="" width="40px" class="rounded-circle m-2"/>
                      <input class="form-control h-75 mt-3" placeholder="请输入评论..." v-model="content"/>
                    </div>
                    <button type="button" class="btn btn-primary"  style="width: 100px;margin-left: 55px;" @click="addComment">发表评论</button>
                  </div>

                  <hr/>

                    <div v-for="c in comments">
                     <div class="delBtn" @click="deleteComment(c.id)">
                      <i class="bi bi-trash3-fill"></i>
                    </div>
                    <div>
                      <div class="d-flex">
                        <img src="../../assets/images/p28.jpg" alt="" width="40px" class="rounded-circle m-2"/>
                        <div class="mt-1">
                          <span class="text-dark fw-bolder h6">游客:
                            <span> {{c.nickname}}</span>
                          </span>
                          <br/>
                          <span>{{c.createTime}}</span>
                        </div>
                      </div>
                      <span style="margin-left: 55px;">{{c.content}}</span>
                      <hr class="my-2"/>
                    </div>
                  </div>



                  <!-- my-3【上下外边距1rem】，ps-1【左内边距0.25rem】，pe-4【右内边距1.5rem】，
                    d-flex【开启弹性布局】，justify-content-between【主轴方向两端对齐】 -->
                  <div class="my-3 ps-1 pe-4 d-flex justify-content-between">
                    <p>转载声明：本博客由波波老师创作。可自由转载、引用，
                      但需署名作者且注明文章出处。如转载至微信公众号，请在文末添加作者微信二维码。
                    </p>
                    <img src="../../assets/images/CSDN.png" alt="" width="150px" height="130px"/>
                  </div>
                </div>
              </div>
            </div>
      </div>
    </section>
  </div>

  <script>
    new Vue({
      el:"#app",
      data() {
        return {
            // 获取文章
            id:null,
            article:{},

            // 相关文章
            relatedArticles:{},

            // 文章类型下的所有评论
            comments:[],

            // 添加评论的内容
            content:'',
        }
      },
      components: {
          // 将组建加入组建库
          'my-header': httpVueLoader('./common/header.vue')
      },
        methods:{
            // 获取文章
          getArticle(){
              this.$http.get("/article/"+this.id).then(res => {
                  this.article=res.data;
              })
          },

          // 相关文章
            getRelatedArticles(){
              this.$http.get("/article/getRelatedArticles/" + this.id).then(res => {
                  this.relatedArticles = res.data;

              })
            },

            // 获取当前文章的所有评论
            getComment(){
                this.$http.get("/comment/" + this.id).then(res => {
                    this.comments = res.data;

                })
            },

            createUuid() {
                var s = [];
                var hexDigits = "0123456789abcdefghi";
                for (var i = 0; i < 36; i++) {
                    s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
                }
                s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
                s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
                s[8] = s[13] = s[18] = s[23] = "-";

                var uuid = s.join("");
                return uuid;
            },

            // 发表评论
            addComment() {
              let comment = {
                  nickname:this.createUuid(),
                  /*articleId是当前页面的id*/
                  articleId:this.id,
                  content:this.content,
              }
              this.$http.put("comment",comment).then(res => {
                  if (res.data.success){
                      this.getComment();
                  }else {
                      this.$message.error("系统繁忙,请稍后再试")
                  }
                  // 发表完评论后评论输入框为空
                  this.content = "";
              }).catch(res =>{
                  this.$message.error("系统繁忙,请稍后再试")
              })
            },

            // 删除评论
            deleteComment(id) {
                // $confirm：弹框
                this.$confirm('你确定要删除当前评论吗?', '温馨提示', {
                    type: 'warning'
                }).then(() => {  // 点击确认后发生的事情
                    this.$http.delete("/comment/" + id).then(res => { // 发送delete请求
                        // 发送请求成功后执行的代码
                        if (res.data.success) {
                            this.getComment();
                        } else {
                            this.$message.error("网络繁忙，请稍后再试 - 500") // 删除失败后返回的信息  后端错误：  500 【服务器错误】 - 服务器内部错误/代码有异常
                        }
                    }).catch(() => {
                        // 发送失败后返回的事情（前端错误：400 【请求错误】 - 请求语法错误/参数错误   404 【请求错误】 - 请求资源未找到（url错误））
                        this.$message.error("网络繁忙，请稍后再试 - 404/400")
                    })
                }).catch(() => { // 点击取消后发生额事情
                });
            },
        },
        mounted() {
          // blog-detail.html:163 http://127.0.0.1/views/blog-detail.html#1
          var url = location.href;
          this.id = url.substring(url.lastIndexOf("?") + 1);
            // 获取文章
          this.getArticle();
             // 相关文章
          this.getRelatedArticles();
            //获取当前文章的所有评论
          this.getComment();
        }
    })
  </script>

</body>

</html>